import { useState, useEffect , useRef} from "react";
import { Link } from "react-router-dom";

import './Home.less'
import api from "../api";
import _ from '@/assets/utils'

import {Swiper, Toast, Image, Divider, DotLoading} from "antd-mobile";
import HomeHead from "../components/HomeHead";
import SkeletonScreen from "../components/SkeletonScreen";
import NewsItem from "../components/NewsItem";

const Home = () => {

    let [timer, setTimer] = useState(_.formatTime(null, '{0}{1}{2}')),
        [banner, setBanner] = useState([]),
        [newsList, setNewsList] = useState([])

    let loadMore = useRef()

    // 第一次渲染完毕请求数据
    useEffect(() => {
        (async () => {
            try {
                let { date, stories, top_stories } = await api.queryNewsLatest()
                setTimer(date)
                setBanner(top_stories)
                newsList.push({
                    date,
                    stories
                })
                setNewsList([...newsList])
            } catch (_) { }
        })()
    }, [])

    // 下拉加载
    useEffect(() => {
        let ob = new IntersectionObserver( async change => {
            let { isIntersecting } = change[0]

            // 如果加载更多按钮出现在视口中
            if(isIntersecting){

                // 加载更多数据
                try {
                    let time = newsList[newsList.length-1].date
                    let {date, stories} = await api.queryNewsBefore(time)
                    newsList.push({
                        date,
                        stories
                    })
                    setNewsList([...newsList])
                }catch (_){}

            }
        })
        // 开始观察
        ob.observe(loadMore.current)
        let loadMoreBox = loadMore.current

        // 组件销毁前
        return () => {
            ob.unobserve(loadMoreBox)
            ob = null
        }

    })



    return <div className='home-box'>
        {/*头部*/}
        <HomeHead timer={timer} />

        {/*轮播图*/}
        <div className={'swiper-box'}>
            {banner.length > 0 ?
                <Swiper loop autoplay>
                    {
                        banner.map(item => {
                            return <Swiper.Item key={item.id}>
                                <Link to={{ pathname: `/detail/${item.id}` }}>
                                    <Image src={item.image} lazy />
                                    <div className={'desc'}>
                                        <h3 className={'title'}>{item.title}</h3>
                                        <p className={"author"}>{item.hint}</p>
                                    </div>
                                </Link>
                            </Swiper.Item>
                        })
                    }
                </Swiper> : null}
        </div>

        {/*新闻列表*/}
        <div className={'news-box'}>
            {
                newsList.length===0 ?
                    <SkeletonScreen />
                    :
                    <div className={'list'}>

                        {
                            newsList.map((item,index) => {
                                let { date , stories} = item
                                return  <div className="news-box" key={date}>
                                    {index !== 0 ? <Divider contentPosition='left'>{_.formatTime(date, '{1}月{2}日')}</Divider> :
                                        null}
                                    <div className="list">
                                        {stories.map(cur => {
                                            return <NewsItem key={cur.id} newsInfo={cur}/>
                                        })}
                                    </div>
                                </div>
                            })
                        }
                    </div>
            }

        </div>


        {/*加载更多*/}
        <div className={'loadmore-box'} style={{ 'display' : newsList.length === 0 ? 'none' : 'block' }} ref={loadMore}>
            <DotLoading/>
            数据加载中
        </div>
    </div>
}

export default Home
